<template>
	<view class="hkOrder">
		<view class="topFix">
			<view class="searchBox flex-align-center">
				<image src="@/static/images/search.png" mode=""></image>
				<input type="text" placeholder="输入姓名/手机号/订单编号搜索" />
				<view class="flex-aj-center">搜索</view>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in 10" :key="index" @click="goDetail" >
				<view class="top flex-align-center">
					<image src="@/static/images/avatar.png" class="avatar" mode=""></image>
					<view class="name">张欣蕊</view>
					<view class="phone flex-1">177 8835 8831</view>
					<view class="status">还款中</view>
				</view>
				<view class="flex-between-center middle">
					<view>
						<view class="number">1800000</view>
						<view class="text">每期月还（元）</view>
					</view>
					<view class="line"></view>
					<view>
						<view class="number">1800000</view>
						<view class="text">每期月还（元）</view>
					</view>
				</view>
				<view class="bottoms flex-between-center">
					<view class="flex-aj-center" >联系客服</view>
					<view class="flex-aj-center" >订单详情</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				
			}
		},
		methods:{
			goDetail(){
				uni.navigateTo({
					url:'./detail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hkOrder {
		.topFix{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 11;
			background-color: #fff;
			.searchBox{
				margin: 16rpx 24rpx;
				height: 80rpx;
				background: #F5F7FA;
				border-radius: 44rpx;
				padding: 0 24rpx;
				position: relative;
				view{
					position: absolute;
					right: 0;
					top: 0;
					width: 120rpx;
					height: 80rpx;
					background: #FF2945;
					border-radius: 0rpx 44rpx 44rpx 0rpx;
					font-family: PingFangSC;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 40rpx;
					font-style: normal;
				}
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}
				input{
					width: 392rpx;
					height: 28rpx;
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 28rpx;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
				}
			}
			.statusList{
				padding: 24rpx;
				>view{
					width: 126rpx;
					height: 64rpx;
					background: #F5F7FA;
					border-radius: 32rpx;
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 28rpx;
					color: #292929;
					line-height: 28rpx;
					font-style: normal;
					margin-right: 18rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					&:last-child{
						margin-right: 0;
					}
					&.active{
						background: rgba(255,41,69,0.08);
						color: #FF2945;
					}
				}
			}
		}
		.list{
			position: relative;
			top: 112rpx;
			padding: 24rpx;
			.item{
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 0 24rpx 24rpx;
				margin-bottom: 24rpx;
				.top{
					padding: 24rpx 0;
					image{
						width: 48rpx;
						height: 48rpx;
						margin-right: 16rpx;
					}
					.name{
						font-family: PingFangSC;
						font-weight: 500;
						font-size: 32rpx;
						color: #292929;
						line-height: 32rpx;
						text-align: left;
						font-style: normal;
						margin-right: 16rpx;
					}
					.number{
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
						line-height: 28rpx;
						text-align: left;
						font-style: normal;
					}
					.status{
						font-family: PingFangSC;
						font-weight: 500;
						font-size: 28rpx;
						color: #FF2945;
						line-height: 28rpx;
						text-align: left;
						font-style: normal;
					}
				}
				.middle{
					padding: 32rpx 0;
					>view{
						width: 302rpx;
						text-align: center;
						:first-child{
							font-family: D-DINExp;
							font-weight: bold;
							font-size: 48rpx;
							color: #292929;
							line-height: 48rpx;
							text-align: center;
							font-style: normal;
							margin-bottom: 16rpx;
						}
						:last-child{
							font-family: PingFangSC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							line-height: 24rpx;
							text-align: center;
							font-style: normal;
						}
					}
					.line{
						width: 2rpx;
						height: 56rpx;
						background: #F5F5F5;
					}
				}
				.bottoms{
					>view{
						width: 316rpx;
						height: 80rpx;
						background: rgba(255,127,41,0.08);
						border-radius: 8rpx;
						font-family: PingFangSC;
						font-weight: 500;
						font-size: 28rpx;
						color: #FF7E29;
						line-height: 28rpx;
						&:last-child{
							background: rgba(255,41,69,0.08);
							color: #FF2945;
						}
					}
				}
			}
		}
	}
</style>